<template>
	<ele-modal
		:width="750"
		:visible="visible"
		:confirm-loading="loading"
		:title="actionStatus == 'edit' ? '修改' : '新建'"
		:body-style="{ paddingBottom: '8px' }"
		@update:visible="updateVisible"
		@ok="save"
	>
		<a-form :label-col="{ md: { span: 7 }, sm: { span: 4 }, xs: { span: 24 } }" :wrapper-col="{ md: { span: 17 }, sm: { span: 20 }, xs: { span: 24 } }">
			<a-row :gutter="24">
				<a-col :md="20" :sm="24" :xs="24">
					<a-form-item label="报溢位置" v-bind="validateInfos.typeCode">
						<a-select	
						:disabled="actionStatus == 'edit'"
							optionFilterProp="label"
							:options="mendian"
							allow-clear
							v-model:value="form.type_code"
							placeholder="请选择报溢位置"
							@change="storeChange"
							autocomplete="off"
						/>
					</a-form-item>
					<a-form-item label="报溢原因" v-bind="validateInfos.profit_cause">
						<div style="display:flex">
							<a-select	
							:disabled="actionStatus == 'edit'"
								optionFilterProp="label"
								:options="lossCause"
								allow-clear
								v-model:value="form.profit_cause"
								placeholder="请选择报溢原因"
								@change="lossCauseChange"
								autocomplete="off"
							/>
							<img src="@/assets/set.png" style="width: 30px; height: 30px; margin-left: 20px; cursor: pointer" @click="showList()" />
						</div>
					</a-form-item>
					<a-form-item label="业务日期" v-bind="validateInfos.time">
						<a-date-picker
							class="ele-fluid"
							value-format="YYYY-MM-DD HH:mm:ss"
							show-time
							placeholder="请选择业务日期"
							v-model:value="form.business_time"
							autocomplete="off"
						/>
					</a-form-item>
					<a-form-item label="备注"><a-textarea placeholder="请输入备注" allow-clear v-model:value="form.note" /></a-form-item>
				</a-col>
			</a-row>
		</a-form>
		<reason-list v-if="reasonListShow" v-model:visible="reasonListShow" @getReason="getReason" />
	</ele-modal>
</template>

<script setup>
import { ref, reactive, onMounted } from 'vue';
import { Form } from 'ant-design-vue';
import { emailReg, phoneReg, identityReg } from 'ele-admin-pro';
import { get_receipts_cause } from '@/api/jewelry/receipts_purchase';
import { receipts_purchase_detail } from '@/api/jewelry/receipts_store_profit';
import reasonList from './reasonList.vue';
import { get_store_select } from '@/api/material/select';
// 表格列配置
const useForm = Form.useForm;
const props = defineProps({
	// 弹窗是否打开
	visible: Boolean,
	// 编辑edit/新建add
	actionStatus: String,
	// 编辑数据id
	editData: Object,
	storeId: String
});
const reasonListShow = ref(false);
const emit = defineEmits(['done', 'update:visible']);
const action = () => {
	reasonListShow.value = true;
};
// 提交状态
const loading = ref(false);
const mendian = ref([]);
const lossCause = ref([]);

onMounted(async () => {
	await get_store_select({ page: 1, page_size: 9999 }).then(res => {
		mendian.value = res;
	});
	//报损原因
	await getReason();
	if (props.editData.code) {
		form.code = props.editData.code;
		await receipts_purchase_detail({ code: props.editData.code }).then(res => {
			Object.keys(form).forEach(key => {
				form[key] = res.receipts_detail ? res.receipts_detail[key] : '';
			});
		});
	}
});

const getReason = ()=>{
	get_receipts_cause({ page: 1, page_size: 9999 }).then(res => {
		lossCause.value = res.list.map(item => {
			return {
				value: String(item.id),
				label: item.content
			};
		});
	});
}
/* 更新分配数据 */
const storeChange = value => {
	form.type_code = value;
};
//更新报溢原因下拉
const lossCauseChange = value => {
	form.profit_cause = value;
};
const showList = () => {
	reasonListShow.value = true;
};
// 表单数据
const form = reactive({
	type_code: null,
	profit_cause: null,
	business_time: '',
	note: ''
});
// 表单验证规则
const rules = reactive({
	typeCode: [
		{
			required: true,
			message: '请选择位置',
			trigger: 'change'
		}
	],
	profit_cause: [
		{
			required: true,
			message: '请选择报溢原因',
			trigger: 'change'
		}
	],
	time: [
		{
			required: true,
			message: '请选择业务日期',
			trigger: 'change'
		}
	]
});

const { validate, validateInfos } = useForm(form, rules);
/* 保存编辑 */
const save = () => {
	validate()
		.then(() => {
			emit('done', form);
		})
		.catch(() => {});
};
/* 更新visible */
const updateVisible = value => {
	emit('update:visible', value);
};
</script>
<style scoped></style>
